<template>
    <div>
        <el-row align="middle">
            <el-col  :offset="6" :span="11">
                <el-menu default-active="1" background-color="" class="el-menu-demo" mode="horizontal" >
                    <el-menu-item index="1" @click="menu('myFollowUser')">关注的人</el-menu-item>
                    <el-menu-item index="2" @click="menu('myFollowTopic')">关注的话题</el-menu-item>
                    <el-menu-item index="3" @click="menu('myCollectProblem')">收藏的问题</el-menu-item>
                    <el-menu-item index="4" @click="menu('myProblem')">我提出的问题</el-menu-item>
                    <el-menu-item index="5" @click="menu('myReply')">我的回答</el-menu-item>
                </el-menu>
                <router-view></router-view>
            </el-col>
            <el-col :offset="1" :span="5">
                <div class="user1">
                    <div>我的关注数：{{user.followCount}}</div>
                    <div>我的粉丝数：{{user.fansCount}}</div>
                    <div>我收获的赞：{{user.thumbUp}}</div>
                </div>
            </el-col>
        </el-row>    
    </div>
</template>

<script>
import {postRequest,getRequest} from '../utils/api.js'
export default {
    name: 'User',

    data() {
        return {
            user:{}
        };
    },

    mounted() {
        getRequest('/user/user/showUser').then((result) => {
            if(result){
                this.user = result;
            }
        }).catch((err) => {
            
        });
    },

    methods: {
        details(id){            
            this.$bus.$emit('problemDetails',id);
        },
         menu(menu){
            this.$router.push({
                name:menu
            })
        },
    },
};
</script>

<style  scoped>
.user1 div{
    font-size: 22px;
    margin-top: 20px;
}
.user1{
    display: inline-block;
    margin-top:50px ;
}
</style>